<script>
export default {
  data() {
    return {
      form: {},
      rules: {
        oldPassword: [
          {required: true, message: '请输入原始密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
        confirmPassword: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
      },

    }
  },
  methods: {
    updatePassword() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {  // 表单校验合法
          if (this.form.password !== this.form.confirmPassword) {
            this.$message.error("两次输入密码不一致");
          } else if (this.form.password === this.form.oldPassword || this.form.confirmPassword === this.form.oldPassword) {
            this.$message.error("新密码与原始密码相同");
          } else {
            // 加入确认对话框
            this.$confirm('您确定要修改密码吗?', '确认操作', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 如果用户点击确定，执行密码更新逻辑
              const requestData = {
                id: JSON.parse(localStorage.getItem("user")).id,
                password: this.form.password,
                oldPassword: this.form.oldPassword
              };

              this.request.post('/user/updatePassword', JSON.stringify(requestData))
                  .then(res => {
                    console.log(res);
                    if (res.code === 400) {
                      this.$message.error(res.message);
                    } else {
                      this.$message.success("修改成功");
                      this.$store.dispatch('logout'); // 调用 Vuex 中的 logout action
                      this.$router.push('/index'); // 导航回首页或登录页
                    }
                  });
            }).catch(() => {
              // 如果用户点击取消，可以选择不执行任何操作或显示一个消息
              this.$message.info('取消密码修改');
            });
          }
        }
      });
    }

  }

}
</script>

<template>
  <div class="animate__animated animate__fadeInLeft"
       style="display: flex; justify-content: center; align-items: center; height: 80vh;">
    <el-card style="width: 45%;">
      <el-form :model="form" label-width="100px" :rules="rules" ref="userForm">
        <el-form-item style="display: none;">
          <el-input v-model="form.id" type="hidden"></el-input>
        </el-form-item>


        <el-form-item label="原密码" prop="oldPassword">
          <el-input v-model="form.oldPassword" show-password autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="新密码" prop="password">
          <el-input v-model="form.password" show-password autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="confirmPassword">
          <el-input v-model="form.confirmPassword" show-password autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="margin-left: 150px" @click="updatePassword">提交</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>

<style scoped>

</style>